﻿<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>商品结算</title>
    <meta name="robots" content="noindex, follow"/>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="../../assets/img/favicon.ico">

    <!-- CSS
	============================================ -->
    <!-- google fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,300i,400,400i,600,700,800,900%7CPoppins:300,400,500,600,700,800,900"
          rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../../assets/css/vendor/bootstrap.min.css">
    <!-- Font-awesome CSS -->
    <link rel="stylesheet" href="../../assets/css/vendor/font-awesome.min.css">
    <!-- Slick slider css -->
    <link rel="stylesheet" href="../../assets/css/plugins/slick.min.css">
    <!-- animate css -->
    <link rel="stylesheet" href="../../assets/css/plugins/animate.css">
    <!-- Nice Select css -->
    <link rel="stylesheet" href="../../assets/css/plugins/nice-select.css">
    <!-- jquery UI css -->
    <link rel="stylesheet" href="../../assets/css/plugins/jqueryui.min.css">
    <!-- main style css -->
    <link rel="stylesheet" href="../../assets/css/style.css">

    <script src="../../assets/js/plugins/utils.js"></script>

    <script src="../../assets/js/plugins/province.js"></script>

    <script src="../../assets/js/vendor/axios.min.js"></script>

    <script src="../../assets/js/vendor/vue.min.js"></script>
</head>

<body onload="getProvince()">
<!-- Start Header Area -->
<header class="header-area" id="header"></header>
<!-- end Header Area -->


<main>
    <!-- breadcrumb area start -->
    <div class="breadcrumb-area breadcrumb-img bg-img" data-bg="../../assets/img/banner/shop.jpg">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb-wrap">
                        <nav aria-label="breadcrumb">
                            <h3 class="breadcrumb-title">订单结算</h3>
                            <ul class="breadcrumb justify-content-center">
                                <li class="breadcrumb-item"><a href="/"><i class="fa fa-home"></i></a></li>
                                <li class="breadcrumb-item"><a href="../product/shop.html">商品列表</a></li>
                                <li class="breadcrumb-item active" aria-current="page">订单结算</li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- breadcrumb area end -->

    <!-- checkout main wrapper start -->
    <div class="checkout-page-wrapper section-padding">
        <div class="container">
            <div class="row">
                <!-- Checkout Billing Details -->
                <div class="col-lg-6">
                    <div class="checkout-billing-details-wrap" id="addressDetail">
                        <h5 class="checkout-title">订单详情</h5>
                        <div class="order-payment-method">
                            <label>默认收货地址</label>
                            <label :id="index" v-for="(address,index) in addresses"  v-if="addresses!=''"><input type="radio" id="address" name="address" :value="address.id">{{address.consignee}} {{address.phone}}
                                {{address.province}}{{address.city}}{{address.area}}{{address.street}}</label>
                             <label v-else>请先去个人中心添加收货地址</label>
                        </div>

                        <div class="billing-form-wrap">
                            <div class="single-input-item">
                                <label for="ordernote">订单备注</label>
                                <textarea name="ordernote" id="ordernote" cols="30" rows="3"
                                          placeholder="关于您订单的备注，例如，快递方式，商品颜色等。"></textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Order Summary Details -->
                <div class="col-lg-6" id="summary">
                    <div class="order-summary-details">
                        <h5 class="checkout-title">订单摘要</h5>
                        <div class="order-summary-content">
                            <!-- Order Summary Table -->
                            <div class="order-summary-table table-responsive text-center">
                                <table class="table table-bordered">
                                    <thead>
                                    <tr>
                                        <th><b>商品</b></th>
                                        <th><b>总共</b></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="product in orderData.products">
                                        <td><a :href="'product-details.html?id='+product.id">{{product.name}}<strong> ×
                                            {{product.num}}</strong></a>
                                        </td>
                                        <td>¥{{product.newPrice*product.num}}</td>
                                    </tr>
                                    </tbody>
                                    <tfoot>
                                    <tr>
                                        <td>小计</td>
                                        <td>¥{{orderData.subtotal}}</td>
                                    </tr>
                                    <tr>
                                        <td>运费</td>
                                        <td class="d-flex justify-content-center">
                                            ¥{{orderData.emsPrice}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>总金额</td>
                                        <td>¥{{orderData.total}}</td>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                            <!-- Order Payment Method -->
                            <div class="order-payment-method">
                                <div class="single-payment-method show">
                                    <div class="payment-method-name">
                                        <div class="custom-control custom-radio">
                                            <input type="radio" id="cashon" name="paymentmethod" value="cash"
                                                   class="custom-control-input" checked/>
                                            <label class="custom-control-label" for="cashon">货到付款</label>
                                        </div>
                                    </div>
                                    <div class="payment-method-details" data-method="cash">
                                        <p>收到货时，请先检查商品没有问题，再付款。</p>
                                    </div>
                                </div>
                                <div class="single-payment-method">
                                    <div class="payment-method-name">
                                        <div class="custom-control custom-radio">
                                            <input type="radio" id="directbank" name="paymentmethod" value="bank"
                                                   class="custom-control-input"/>
                                            <label class="custom-control-label" for="directbank">在线支付</label>
                                        </div>
                                    </div>
                                    <div class="payment-method-details" data-method="bank">
                                        <p>支付功能正在测试中，请勿勾选</p>
                                    </div>
                                </div>
                                <div class="summary-footer-area">
                                    <button type="button" class="btn btn-sqr" @click="subOrder">支付订单</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- checkout main wrapper end -->
</main>

<!-- Scroll to top start -->
<div class="scroll-top not-visible">
    <i class="fa fa-angle-up"></i>
</div>
<!-- Scroll to Top End -->


<!-- footer area start -->
<footer class="black-bg" id="footer">
</footer>
<!-- footer area end -->


<!-- JS
============================================ -->

<!-- Modernizer JS -->
<script src="../../assets/js/vendor/modernizr-3.6.0.min.js"></script>
<!-- jQuery JS -->
<script src="../../assets/js/vendor/jquery-3.3.1.min.js"></script>

<script src="../../assets/js/user/checkout.js"></script>
<!-- Popper JS -->
<script src="../../assets/js/vendor/popper.min.js"></script>
<!-- Bootstrap JS -->
<script src="../../assets/js/vendor/bootstrap.min.js"></script>
<!-- slick Slider JS -->
<script src="../../assets/js/plugins/slick.min.js"></script>
<!-- Countdown JS -->
<script src="../../assets/js/plugins/countdown.min.js"></script>
<!-- Nice Select JS -->
<script src="../../assets/js/plugins/nice-select.min.js"></script>
<!-- jquery UI JS -->
<script src="../../assets/js/plugins/jqueryui.min.js"></script>
<!-- Image zoom JS -->
<script src="../../assets/js/plugins/image-zoom.min.js"></script>
<!-- image loaded js -->
<script src="../../assets/js/plugins/imagesloaded.pkgd.min.js"></script>
<!-- masonry  -->
<script src="../../assets/js/plugins/masonry.pkgd.min.js"></script>
<!-- mailchimp active js -->
<script src="../../assets/js/plugins/ajaxchimp.js"></script>
<!-- contact form dynamic js -->
<script src="../../assets/js/plugins/ajax-mail.js"></script>
<!-- Main JS -->
<script src="../../assets/js/main.js"></script>
<script>
    $("#header").load("/view/common/header.html");
    $("#footer").load("/view/common/footer.html");
</script>
</body>

</html>